<template>
  <div class="app-container">
    <el-row>
      <!-- 左边填写基本信息 -->
      <el-col class="leftModule" :span="18">
        <el-form ref="EtmsItemAbilityOutline" :model="EtmsItemAbilityOutline" label-width="80px" :rules="rules"
          class="demo-ruleForm">
          <el-col :span="24"><span class="title">基本信息</span></el-col>
          <!-- 上传封面 -->
          <el-col :span="12" style="margin-top: 50px">
            <el-upload class="upload-demo" drag action="string" :show-file-list="false"
              :before-upload="beforeAvatarUpload" :http-request="uploadPicture">
              <img :src="EtmsItemAbilityOutline.etmsItem.trainCover" width="100%">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                上传封面<br><br>可拖曳上传
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过5MB
              </div>
            </el-upload>
          </el-col>
          <el-col :span="12" style="height: 100px; margin-top: 50px">
            <el-form-item label="培训标题" prop="etmsItem.trainTitle">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.trainTitle" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 130px">
            <el-form-item label="负责人" prop="etmsItem.trainPrinc">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.trainPrinc" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训类别" prop="etmsItem.trainType">
              <el-select v-model="EtmsItemAbilityOutline.etmsItem.trainType" placeholder="部门类别">
                <el-option v-for="dept in options" :key="dept.key" :label="dept.deptName" :value="dept.deptName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训形式">
              <el-select v-model="EtmsItemAbilityOutline.etmsItem.trainForm" placeholder="线上/线下">
                <el-option label="线上" value="线上"></el-option>
                <el-option label="线下" value="线下"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="难度等级">
              <el-select v-model="EtmsItemAbilityOutline.etmsItem.trainLevel" placeholder="培训难度等级">
                <el-option label="低" value="低"></el-option>
                <el-option label="中" value="中"></el-option>
                <el-option label="高" value="高"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训状态">
              <el-select v-model="EtmsItemAbilityOutline.etmsItem.trainStatus" placeholder="培训状态">
                <el-option label="已进行" value="已进行"></el-option>
                <el-option label="未开始" value="未开始"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训计划">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.trainPlan" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训预算" prop="etmsItem.trainBudget">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.trainBudget" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="etmsItem.trainDescription">
              <el-input type="textarea" v-model="EtmsItemAbilityOutline.etmsItem.trainDescription"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-top: 50px"><span class="title">报名设置</span>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名人数" style="margin-top: 50px" prop="etmsItem.applyNum">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.applyNum" placeholder="人数不限"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="截止时间" style="margin-top: 50px" prop="etmsItem.applyCuttime">
              <el-date-picker type="date" placeholder="选择日期" v-model="EtmsItemAbilityOutline.etmsItem.applyCuttime"
                style="width: 100%" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名审核">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.applyCheck" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名形式">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.applyForm" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-top: 50px"><span class="title">培训设置</span>
          </el-col>
          <el-col :span="12" style="margin-top: 50px">
            <el-form-item label="开始时间" prop="etmsItem.trainBetime">
              <el-date-picker type="date" placeholder="选择日期" v-model="EtmsItemAbilityOutline.etmsItem.trainBetime"
                style="width: 100%" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-top: 50px">
            <el-form-item label="结束时间" prop="etmsItem.trainEndtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="EtmsItemAbilityOutline.etmsItem.trainEndtime"
                style="width: 100%" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训地点">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.trainAdderss" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训讲师" prop="etmsItem.trainTeacher">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.trainTeacher" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学习形式">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.studyType" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书">
              <el-input v-model="EtmsItemAbilityOutline.etmsItem.studyType" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否签到">
              <el-select v-model="EtmsItemAbilityOutline.etmsItem.signIn" placeholder="是/否">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
      <el-col class="rightModule_one" :span="6">
        <el-form :model="EtmsItemAbilityOutline.outline" ref="EtmsItemAbilityOutline.outline" label-width="50px" class="demo-dynamic">
        <!-- <el-form ref="EtmsItemAbilityOutline.outline" :model="EtmsItemAbilityOutline.outline"
          label-width="80px"> -->
          <el-col :span="24"><span class="title">培训大纲</span></el-col>
          <el-col :span="24" style="margin-top: 50px">
              <!-- 大纲下的目录 -->
              <el-form-item
                v-for="(catalog, index) in EtmsItemAbilityOutline.outline.catalogs"
                :label="'目录' + (index+1)"
                :key="catalog.key"
                :prop="'catalogs.' + index + '.value'">
                <el-input v-model="catalog.catalogName" style="width: 150px" size="mini"></el-input>
                <el-button @click="removeCatalog(catalog)" size="mini" type="danger" >删除目录</el-button>

                <!-- 目录下的课件 -->
                <el-form :model="catalog" ref="catalog" label-width="50px" class="demo-dynamic" style="margin-left:-20px;margin-top:10px">
                  <el-form-item 
                    v-for="(classFile, index) in catalog.classFileList"
                    :label="'课程' + (index+1)"
                    :key="classFile.key"
                    :prop="'classFiles.' + index + '.value'">
                    <el-input v-model="classFile.classTitle" style="width: 100px" size="mini"></el-input><br>
                    <el-button @click="removeClassFile(catalog, classFile)" size="mini" type="danger">删除课程</el-button>
                    <el-button @click="addClassFile(catalog)" size="mini">新增课程</el-button>
                  </el-form-item>
                
                </el-form>

              </el-form-item>
              <el-form-item>
                <el-button @click="addCatalog" size="mini">新增目录</el-button>
              </el-form-item>
          </el-col>
        </el-form>
      </el-col>
      <el-col class="rightModule_two" :span="6">
        <el-form ref="ruleform" :model="EtmsItemAbilityOutline" label-width="80px" :rules="rules" class="demo-ruleForm">
          <el-col :span="24"><span class="title">培训能力指标设置</span></el-col>
          <el-col :span="24">
            <div class="smallTitle">自我成长</div>
          </el-col>
          <el-col :span="24">
            <div class="smallSmallTitle">
              追求卓越：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[0].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              抗压能力：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[1].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              学习能力：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[2].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              积极主动：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[3].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="smallTitle">人际交往</div>
          </el-col>
          <el-col :span="24">
            <div class="smallSmallTitle">
              沟通能力：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[4].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              团队合作：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[5].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              协作能力：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[6].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              影响说服：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[7].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="smallTitle">决策执行</div>
          </el-col>
          <el-col :span="24">
            <div class="smallSmallTitle">
              决策判断：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[8].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              高效执行：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[9].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              规划安排：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[10].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              认真负责：
              <el-input-number v-model="EtmsItemAbilityOutline.amSubjectLists[11].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br><br><br>
              <el-button type="primary" @click="submitForm('EtmsItemAbilityOutline')" size="medium">
                创建培训项目
              </el-button>
              <br><br>
            </div>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { Message } from 'element-ui'
import { findAll } from '@/api/dept';
import { addItem } from '@/api/item'
import { uploadPicture } from '@/api/course'

  export default {
    data() {
      return {
        /* 部门动态生成 */
        options: {},
        EtmsItemAbilityOutline: {
          etmsItem: {
            trainTitle: "",
            trainDescription: "",
            trainType: "",
            trainLevel: "",
            trainForm: "",
            trainStatus: "",
            trainPlan: "",
            trainBudget: [],
            trainPrinc: "",
            trainCover: "",
            trainHour: "",
            applyNum: "",
            applyCuttime: "",
            applyCheck: "",
            applyForm: "",
            trainBetime: "",
            trainEndtime: "",
            trainAdderss: "",
            trainTeacher: "",
            studyType: "",
            signIn: "",
          },
          //大纲数据
          outline: {
            catalogs: [{
              classFileList: [{
                classTitle: '',
                outlineId: 0,
                classFile: ''
              }],
              catalogName: ''
            }]
          },
          amSubjectLists: [{
              amId: '2',
              score: 0,
            },
            {
              amId: '3',
              score: 0,
            },
            {
              amId: '4',
              score: 0,
            },
            {
              amId: '5',
              score: 0,
            },
            {
              amId: '7',
              score: 0,
            },
            {
              amId: '8',
              score: 0,
            },
            {
              amId: '9',
              score: 0,
            },
            {
              amId: '10',
              score: 0,
            },
            {
              amId: '12',
              score: 0,
            },
            {
              amId: '13',
              score: 0,
            },
            {
              amId: '14',
              score: 0,
            },
            {
              amId: '15',
              score: 0,
            },
          ],


        },
        /* 规则限定 */
        rules: {
          "etmsItem.trainTitle": [{
              required: true,
              message: "请输入培训标题",
              trigger: "blur",
            },
            {
              min: 3,
              max: 20,
              message: "长度在 3 到 20 个字符",
              trigger: "blur",
            },
          ],
          "etmsItem.trainPrinc": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsItem.trainBudget": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsItem.trainDescription": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsItem.applyNum": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsItem.applyCuttime": [{
            // type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          }, ],
          "etmsItem.trainBetime": [{
            // type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          }, ],
          "etmsItem.trainEndtime": [{
            // type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          }, ],
          "etmsItem.trainTeacher": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsItem.trainType": [{
            required: true,
            message: "请选择培训类别",
            trigger: "change",
          }, ],
          "etmsItem.form": [{
            required: true,
            message: "请选择培训形式",
            trigger: "change",
          }, ],
          date1: [{
            // type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          }, ],
          date2: [{
            // type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          }, ],
        },
        imageUrl: "",
      };
    },
    methods: {
      test(value) {
        alert(value);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      /* 上传封面前的准备 */
      beforeAvatarUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
        const extension =
          testmsg === "jpg" ||
          testmsg === "JPG" ||
          testmsg === "png" ||
          testmsg === "PNG"

        const isLt5M = file.size / 1024 / 1024 < 5;

        if (!extension) {
          this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        }
        if (!isLt5M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
        }
        return extension || isLt5M;
      },
      /* 上传封面 */
      uploadPicture(param) {
        const formdata = new FormData();
        formdata.append("userId", 0);
        formdata.append("file", param.file);
        formdata.append("format", param.file.name)
        uploadPicture(formdata).then((res) => {
          // this.imageUrl = res.data;
          this.EtmsItemAbilityOutline.etmsItem.trainCover = res.data;
          console.log(res);
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.EtmsItemAbilityOutline);
            addItem(this.EtmsItemAbilityOutline).then(res => {
              Message({
                message: res.message,
                type: 'success',
                duration: 2 * 1000
              })
            });
            this.$router.push({
              name:"ItemHome",
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleChange(value) {
        console.log(value);
      },
      allDepts() {
        findAll().then(res => {
          this.options = res.data
          console.log(res);
        })
      },
      //目录新增删除
      removeCatalog(item) {
        var index = this.EtmsItemAbilityOutline.outline.catalogs.indexOf(item)
        if (index !== -1) {
          this.EtmsItemAbilityOutline.outline.catalogs.splice(index, 1)
        }
      },
      addCatalog() {
        this.EtmsItemAbilityOutline.outline.catalogs.push({
          classFileList: [{
            classTitle: '',
            outlineId: 0,
            classFile: ''
          }],
          catalogName: '',
          key: Date.now()
        });
      },

      //课程新增删除
      removeClassFile(catalog, classFile) {
        var index = catalog.classFileList.indexOf(classFile)
        if (index !== -1) {
          catalog.classFileList.splice(index, 1)
        }
      },
      addClassFile(catalog) {
        catalog.classFileList.push({
          classTitle: '',
          outlineId: 0,
          classFile: '',
          key: Date.now()
        });
      }
    },

    created() {
      /* 动态生成部门选项下拉框 */
      this.allDepts();
    },
    onSubmit() {
      console.log("submit!");
    },
    

  };

</script>

<style scoped>
  .leftModule {
    width: 900px;
    border-radius: 4px;
    margin-left: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .rightModule_one {
    margin-left: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .rightModule_two {
    margin-top: 15px;
    margin-left: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .title {
    margin-top: 15px;
    color: cadetblue;
    font-size: 20px
  }

  .smallTitle {
    margin-top: 20px;
    color: rgb(236, 141, 52);
    font-size: 18px
  }

  .smallSmallTitle {
    margin-top: 20px;
    color: rgb(109, 116, 121);
    font-size: 15px
  }

  .el-form {
    margin-top: 40px;
    margin-left: 30px;
  }

  .el-row {
    margin-top: 30px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 120px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-input-number {
    margin-top: 10px;
  }

</style>
